<template>
  <ul class="list-group">
    <!-- 列表组 -->
    <!-- v-for进行循环遍历数组对象，不断获取到对象 -->
    <li class="list-group-item d-flex justify-content-between align-items-center" v-for="item in list" :key="item.id">
      <!-- 复选框 -->
      <div class="custom-control custom-checkbox">
        <!-- v-model双向绑定的结果：用户操作修改的是App组件中数据的状态 -->
        <input type="checkbox" class="custom-control-input" :id="item.id" v-model="item.done" />
        <!-- v-bind属性绑定，动态的切换元素的类名 -->
        <label class="custom-control-label" :class="item.done ? 'delete' : ''" :for="item.id">{{item.task}}</label>
      </div>
      <!-- 徽标 -->
      <!-- v-if 、 v-else 进行渲染 -->
      <span class="badge badge-success badge-pill" v-if="item.done">完成</span>
      <span class="badge badge-warning badge-pill" v-else>未完成</span>
    </li>
  </ul>
</template>

<script>
export default{
    name:'TodoList',
    props:{
        list:{
            type:Array,
            required:true,
            default:[],
        },
    },
}
</script>

<style lang="less" scoped>
.list-group {
  width: 400px;
}

.delete {
  text-decoration: line-through;
  color: gray;
  font-style: italic;
}
</style>